<!-- 饲喂及成本-->
<template>
	<border cardTitle="心电AI预警">
		<div class="filterbar flex flex-pack-end" slot="more">
			<div class="tabs flex">
				<div class="tab" :class="[{ active: type == 1 }]" @click="changeType(1)">本月</div>
				<div class="tab" :class="{ active: type == 2 }" @click="changeType(2)">本年</div>
			</div>
		</div>
		<Chart :optionData="option_column" style="height: 100%"></Chart>
	</border>
</template>
<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	import {
		bigScreenApi
	} from '@/api/index';
	import * as echarts from 'echarts';
	import {
		getRandom
	} from '@/utils/base.js'
	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		data() {
			return {
				type: 1,
				selected: '',
				succahlist: [],
				option_column: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: 'rgba(0, 255, 233,0)'
										},
										{
											offset: 0.5,
											color: 'rgba(255, 255, 255,1)'
										},
										{
											offset: 1,
											color: 'rgba(0, 255, 233,0)'
										}
									],
									global: false
								}
							}
						},
						formatter(params) {
							console.log(params);
							let iconDiv = '';
							iconDiv = `<div>${params[0].name}</div>
						<div>${params[0].seriesName}:<span style="color:#000;font-weight:600">${params[0].value}</span>次</div>
						<div>${params[1].seriesName}:<span style="color:#000;font-weight:600">${params[1].value}</span>次</div>`;
							return iconDiv;
						}
					},
					grid: {
						top: '22%',
						left: '10%',
						right: '10%',
						bottom: '20%'
						// containLabel: true
					},
					legend: {
						type: 'scroll',
						bottom: 0,
						left: 'center',
						icon: 'rect',
						itemGap: 20,
						padding: [0, 20],
						itemWidth: 12,
						itemHeight: 12,
						textStyle: {
							fontSize: 12,
							color: '#fff'
						},
						itemStyle: {
							borderWidth: 0
						}
					},
					xAxis: [{
						type: 'category',
						axisLine: {
							show: true
						},
						axisLabel: {
							color: '#fff'
						},
						splitLine: {
							show: false
						},
						boundaryGap: false,
						data: []
					}],

					yAxis: [{
							name: '单位 (次)',
							type: 'value',
							min: 0,
							// max: 140,
							splitNumber: 4,
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: 'rgba(255,255,255,0.2)'
								}
							},
							axisLine: {
								show: false
							},
							axisLabel: {
								show: true,
								margin: 10,
								textStyle: {
									color: 'rgba(255,255,255,0.6)'
								}
							},
							axisTick: {
								show: false
							}
						},
						{
							name: '单位 (次)',
							type: 'value',
							position: 'right',
							splitNumber: 4,
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: 'rgba(255,255,255,0.2)'
								}
							},
							axisLine: {
								show: false
							},
							axisLabel: {
								show: true,
								margin: 10,
								textStyle: {
									color: 'rgba(255,255,255,0.6)'
								}
							},
							axisTick: {
								show: false
							}
						}
					],
					series: [{
							name: '防颤',
							type: 'line',
							smooth: true,
							symbolSize: 0,
							lineStyle: {
								normal: {
									color: '#37E0CC'
								}
							},
							label: {
								show: false
							},
							tooltip: {
								show: true
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: 'rgba(55, 224, 223, .4)'
											},
											{
												offset: 1,
												color: 'rgba(55, 224, 223, .1)'
											}
										],
										false
									),
									shadowColor: 'rgba(55, 224, 223, .9)',
									shadowBlur: 20
								}
							},
							data: []
						},
						{
							name: '卒中',
							type: 'line',
							smooth: true,
							symbolSize: 0,
							yAxisIndex: 1,
							lineStyle: {
								normal: {
									color: '#1363FF'
								}
							},
							label: {
								show: false
							},
							tooltip: {
								show: true
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: 'rgba(66, 130, 255, .4)'
											},
											{
												offset: 1,
												color: 'rgba(66, 130, 255, 0.1)'
											}
										],
										false
									),
									shadowColor: 'rgba(66, 130, 255, 0.5)',
									shadowBlur: 20
								}
							},
							data: []
						}
					]
				}
			};
		},
		computed: {},
		props: {
			deptId: {
				type: [String, Number],
				default: '',
				option_column: {}
			}
		},
		watch: {
			deptId: {
				handler(newV, oldV) {
					this.$nextTick(() => {
						// this.selected = '';
						this.getInfo();
					});
				},
				immediate: true
			}
		},
		created() {},
		methods: {
			getInfo() {
				// this.$postAction(bigScreenApi.getsuccahlist, {
				// 	deptId: this.deptId
				// }).then(res => {
				// 	if (res && res.code == 1) {

				// 	}
				// });
				// this.succahlist = res.data;
				this.getEchart();
			},
			changeType(type) {
				this.type = type;
				this.getEchart();
			},
			getEchart() {
				// this.$postAction(bigScreenApi.feedsCosts, {
				// 	deptId: this.deptId,
				// 	// succahId: this.selected,
				// 	type: this.type
				// }).then(res => {
				// 	if (res && res.code == 1) {
				// 		}
				// });
				let cowData = [];
				let feedCount = this.$ls.get('feedCount');
				let today = moment().format('YYYY-MM-DD');
				if (feedCount && feedCount.day == today) {
					cowData = feedCount.cowData
				} else {
					let daysList = [];
					const start = moment().startOf("month");
					const end = moment(today);
					const day = end.diff(start, "days");
					daysList.push(start.format("DD"));
					console.log('daysList', daysList)
					for (let i = 1; i <= day; i++) {
						daysList.push(start.add(1, "days").format("DD"));
					}
					daysList.forEach((item) => {
						cowData.push({
							item: item,
							feedsCount: getRandom(0, 20),
							feedscosts: getRandom(0, 20)
						})
					})
					this.$ls.set('feedCount', {
						cowData,
						day: today
					});
					// let cowData = [{
					// 	item: 1,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 2,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 3,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 4,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 5,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 6,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 7,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 8,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 9,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 10,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 11,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 12,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 13,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }, {
					// 	item: 14,
					// 	feedsCount: 1,
					// 	feedscosts: 2
					// }];
				}

				let nameList = [];
				let feedList = [];
				let moneyList = [];
				cowData.forEach(item => {
					nameList.push(item.item + (this.type == 1 ? '日' : '月'));
					feedList.push(item.feedsCount);
					moneyList.push(item.feedscosts);
				});

				this.option_column.xAxis[0].data = nameList;
				this.option_column.series[0].data = feedList;
				this.option_column.series[1].data = moneyList;

			},
			channgeSuccah() {
				console.log(this.selected);
				this.getEchart();
			}
		}
	};
</script>

<style scoped lang="less">
	.filterbar {
		margin-right: 0.25rem;

		select {
			width: 1.2rem;
			height: 0.21rem;
			background: rgba(0, 0, 0, 0.2);
			border: 1px solid #193d7e;
			border-radius: 3px;
			font-size: 0.12rem;

			option {
				background: #193d7e;
			}
		}

		.tabs {
			.tab {
				width: 0.72rem;
				height: 0.21rem;
				line-height: 0.21rem;
				background: rgba(31, 220, 255, 0.1);
				border-radius: 2px;
				color: #a1aabf;
				font-size: 0.145rem;
				margin: 0 0.06rem;
				cursor: pointer;

				&.active {
					background: #1f79ff;
					color: #fff;
				}
			}
		}
	}
</style>